<template>
  <scroll-view class="consultation" :style="[mainStyle]" scroll-y @scroll='scroll'>
    <view class="jh-row jh-center padding-l7">
      <view class="jh-flex jh-row jh-flex-wrap padding-t12" :style="{width: viewWidth + 'px'}">
        <block v-for="(i,index) in list" :key='index'>
          <!-- <view
            class="consultation-item margin-r7 margin-b12 jh-flex-center jh-column"
            :class="{'consultation-item-a': current == index}"
            @tap='clickItem(index)'
          >
            <jh-text size="16" type="Bold" :color="current == index ? '#fff' : '#00374D'" :value="i.zh_name"></jh-text>
            <jh-text size="7" :color="current == index ? '#fff' : '#00374D'" :value="i.en_name"></jh-text>
          </view> -->
          <view
            class="consultation-item margin-r7 margin-b12 jh-flex-center jh-column"
            :class="{'consultation-item-a': current == index}"
            :style="{width: 94 * i.size + 8 * (i.size - 1) + 'px'}"
            @tap='clickItem(index)'
          >
            <jh-text size="16" type="Bold" :color="current == index ? '#fff' : '#00374D'" :value="i.zh_name"></jh-text>
            <jh-text size="7" :color="current == index ? '#fff' : '#00374D'" :value="i.en_name"></jh-text>
          </view>
        </block>
        <view style="width: 94px;" class="margin-r7" v-for="(i,index) in 6" :key='index'></view>
      </view>
    </view>
    <callService type='13'></callService>
  </scroll-view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import callService from '@/components/call-service/call-service'
  export default {
    components: {
      callService
    },
    props: {
      mainStyle: {
        type: Object,
        default: ''
      }
    },
    computed: {
      viewWidth () {
        let width = parseInt(this.mainStyle.width)
        width = Number(String(width)[0] + '00')
        return width + 8
      },
      viewHeight () {
        return parseInt(this.mainStyle.height)
      }
    },
    data() {
      return {
        ossDomain: uni.ossDomain,
        list: [],
        current: -1,
        max_id: '',
        timeout: null
      }
    },
    mounted() {
      this.getDisease()
    },
    methods: {
      getDisease () {
        if (this.inHttp) return
        let obj = {}
        if (this.max_id) {
          obj.max_id = this.max_id
        }
        this.inHttp = true
        uni.$http.getDisease(obj).then(res => {
          let {max_id, list} = res.data
          console.log(res);
          setTimeout(()=>{
            this.inHttp = list.length ? false : true
          },500)
          this.max_id = max_id || this.max_id
          list.map(e => {
             if (e.zh_name.length > 4 && e.zh_name.length < 7) {
              e.size = 1.5
            } else if (e.zh_name.length >= 7) {
              e.size = 2
            } else {
              e.size = 1
            }
            return e
          })
          this.list = this.list.concat(list)
        })
      },
      scroll (e) {
        let {scrollHeight, scrollTop} = e.detail
        if (scrollHeight - scrollTop < this.viewHeight + 200) {
          this.getDisease()
        }
      },
      clickItem (i) {
        let item = this.list[i]
        console.log(item.url);
        let url = encodeURIComponent(`${item.url}&appType=3`)
        uni.$navigateTo(`/pages/consultation/article?title=${item.zh_name}&url=${url}&serverType=13`)
        this.current = i
        clearTimeout(this.timeout)
        this.timeout = setTimeout(()=>{
          this.current = -1
        },200)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .consultation{
    position: relative;
    &-item{
      width: 94px;
      height: 52px;
      background-color: #E0F1F4;
      &-a{
        background-color: #008399;
      }
    }
  }
</style>
